<template>
    <div id="containers" ref="cards"   class="blackfixed" @click.self="close()">
        <div  ref="carsContent" class="mcontentW"  style="z-index: 2001;">
            <div class="mcontent"  :style="{width:width}">
               <h3>{{title}}</h3>
                <div id="bodyContent" class="bodyContents" ref="bodyContent"></div>
            </div>
        </div>
    </div>



</template>

<script>
  import Vue from 'vue'
  export default {

    name: "card",
    props:['width','title','height','props','funCode','callback'],
    data(){
      return{
        centerDialogVisible:true,

      }
    },
    mounted(){
      this.$nextTick(()=>{
        this.render()
    })
    },
    methods:{
      render:function(){
        let vm = this;
        var com = window.getRouter(this.funCode);
        com.component.methods.callback =function (obj={}) {
          if(vm.callback){
            vm.callback(vm.close,obj)
          }
        }
        com.component.methods.close =function () {
          vm.close()
        }
        var app= Vue.extend({
          render:function (createElement) {
            return createElement(com.component,{
              props: vm.props
            });
          }
        })
        new app().$mount('#bodyContent')
        setTimeout(()=>{
          // document.getElementById('containers').style.opacity="1"
          this.$refs.cards.style.opacity="1"
        // this.$refs.carsContent.style.top="0"

      })

      },


      close(){

        this.$destroy()
        this.$el.remove();

      },

    }
  }
</script>

<style lang="scss"   scoped>

  .bodyContents{
    padding:10px;



  }
  .mcontentW{
    margin:0 auto;
    position:relative;
    top:30%;
  }
  .mcontent{
    border-radius:8px;
    text-align:center;
    background:#FFF;
    font-size:12px;
    padding:10px;
    margin:0 auto;
    overflow:hidden;

    h3{
      margin:0;padding:0;
      font-weight:500;
      color:#333;
      font-size:16px;

      padding:3px 0;
      padding-bottom:10px;
      margin:10px -10px;
    }
    padding:10px;

  }
    #bodyContent{
        max-height: 500px;
        overflow: auto;
    }
    .blackfixed{
        background:rgba(0,0,0,.5);
        width:100%;height:100%;
        top:0;
        opacity:0;
        position:fixed;
        left:0;
        z-index:99999;
        transition: all 200ms;

    }



</style>

